<template>
  <div class="login">
<van-nav-bar
  title="会员登录"
  left-arrow
  @click-left="$router.push('/home')"
/>
<div class="centent">
  <div class="hint">

    <p class="one">手机号登录</p>
    <p  class="two">未注册的手机号登录后将自动注册</p>
  </div>
  <van-form @submit="onSubmit">
  <van-field
    v-model="mobile"
    name="username"
    placeholder="请输入手机号"
    :rules="[{ required: true, message: '请输入手机号' },{pattern:/^(?:(?:\+|00)86)?1\d{10}$/,message:'请输入正确的手机号'}]"
  />
  <van-field
    v-model="captchaCode"
    type="identifying"
    name="图形验证码"
    placeholder="请输入图形验证码"
    :rules="[{ required: true, message: '请输入图形验证码' },{pattern:/^\w{4,}$/,message:'请输入正确图形验证码'}]"
  ><template #button>
    <img :src="src" @click="getpage" alt="">
    </template></van-field>

  <van-field
    v-model="duanxing"
    type="duanxing"
    name="密码"
    placeholder="请输入短信验证码"
    :rules="[{ required: true, message: '请输入短信验证码' },{pattern:/^\w{6,}$/,message:'请输入短信验证码'}]"
  ><template #button>
    <a href="#" @click.prevent="Ongettext" v-if="Isgettext">获取验证码</a>
    <a href="#" @click.prevent="Ongettext" v-else>{{num}}后重新发送</a>
    </template></van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
</div>
</div>
</template>

<script>
import { getImg, Submit, Gettext } from '@/api/login'
import { setToken } from '@/utils/local'
export default {
  name: 'LoginIndex',
  data () {
    return {
      duanxing: '',
      platform: 'jack',
      src: '',
      num: 60,
      Isgettext: true,
      mobile: '',

      smsCode: '246810',
      partyData: {},
      isParty: false,

      captchaCode: '',
      captchaKey: ''
    }
  },
  methods: {

    onClickLeft () {

    },
    // 登录
    async onSubmit () {
      const res = await Submit({
        mobile: this.mobile,
        smsCode: this.smsCode,
        partyData: this.partyData,
        isParty: this.isParty
      })
      setToken(res.data.token)
      console.log(res)
      this.$toast(res.message)
      this.$router.push('/home')
    },
    submit () {

    },
    // 获取手机号验证码
    async Ongettext () {
      if (this.Isgettext) {
        this.Isgettext = false
        const res = await Gettext({
          mobile: this.mobile,
          captchaCode: this.captchaCode,
          captchaKey: this.captchaKey

        })
        this.$toast(res.message)

        console.log(res)
        const kaiqi = setInterval(() => {
          this.num--
          if (this.num <= 0) {
            clearInterval(kaiqi)
            this.Isgettext = true
            this.num = 60
          }
        }, 1000)
      }
    },
    // 图片验证码
    async getpage () {
      const res = await getImg(this.platform)
      this.src = res.data.base64
      this.captchaKey = res.data.key
      console.log(res.data.key)
    }
  },
  created () {
    this.getpage()
  }
}
</script>

<style lang='less' scoped>
/deep/.van-nav-bar__content{
  height: 40px;
  .van-icon{
    color: #000;
  }
  .van-nav-bar__title {
      color: #000;
      font-weight: 700;
      font-size: 15px;
      line-height: 15px;
  }
  .van-nav-bar__left {
    .van-nav-bar__arrow{
      font-size: 13px;
    }
  }
}

.centent{
  margin: 50px 30px;
  .hint{
    .one{
      font-size: 30px;
    }
    .two{
      margin-top: -25px;
      font-size: 15px;
      color: #b3b3b3;
    }
  }

    a{
      font-size: 14px;
      color: #cea26a;

    }
}
/deep/.van-form{

  .van-cell{
    .van-field__control{
      height: 40px;
      font-size: 15px;
      margin-top: 15px;
      border-bottom: 1px solid #f3f1f2;
     color: #000;

    }
    img{
        width: 120px;
        height: 40px;
     }
  }
  .van-button{
    margin-top: 50px;
    height: 50px;
    background-color: #f99d1f;
    border: none;
    font-size: 15px ;
  }
}
</style>
